<template>
  <div v-cloak>
    <Meta pagealias="preachlist" />
    <div class="bg">
      <Head>宣讲会</Head>
      <div class="box_1">
        <div class="content" @click="toggleSearch">
          <div class="search_ico">
            {{ params.keyword === "" ? "请输入关键字" : params.keyword }}
          </div>
        </div>
      </div>
      <van-popup v-model="show" position="top" :style="{ height: '90%' }">
        <TopSearch type="campus" @hideSearch="toggleSearch" @doSearch="doSearchByKeyword"></TopSearch>
      </van-popup>
      <van-dropdown-menu>
        <van-dropdown-item :title="districtTitle" ref="dropDistrict" :lock-scroll="false" @opened="openedDistrict" @closed="closedDistrict">
          <DistrictFilter :districts="[params.district1, params.district2, params.district3]" :type="true" @doSearch="doSearchByDistrict"></DistrictFilter>
        </van-dropdown-item>
        <van-dropdown-item :title="schoolTitle" v-model="params.school_id" :options="campusNameData" @change="searchBySchool"/>
        <van-dropdown-item :title="timeTitle" v-model="params.timecase" :options="holdingTime" @change="searchByTime" />
      </van-dropdown-menu>
      <van-empty image="search" description="没有找到对应的数据" style="background-color:#fff" v-if="show_empty === true"/>
      <van-list v-if="dataset.length > 0" @load="onLoad" v-model="loading" :finished="finished" :finished-text="finishedText" :immediate-check="false">
        <div class="declare_meeting">
          <div :class="dataset.length >=4 ? 'declare_list declare_list_pd2' : 'declare_list declare_list_pd1'" >
            <div class="declare_item" v-for="(item, index) in dataset" :key="index" @click="$router.push('/campus/preach/' +  item.id)">
              <div class="declare_t">
                <!-- <span class="de_icon">已过期</span> -->
                <a class="declare_name substring">{{item.subject}}</a>
                <p class="declare_date substring">
                  举办时间：{{item.starttime | timeFilter}}
                </p>
              </div>
              <div class="declare_b">
                <div class="declare_b_img">
                  <img :src="item.logo_url" alt="" />
                </div>
                <div class="declare_b_text">
                  <a class="declare_b_text1 substring">{{item.school_name}}</a>
                  <p class="declare_b_text2 substring">
                    {{item.address}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <div class="height" v-if="dataset.length >= 3"></div>
    </div>
    <BottomNav></BottomNav>
  </div>
</template>
<script>
import BottomNav from '../components/BottomNav.vue'
import DistrictFilter from '@/components/DistrictFilter.vue'
import http from '../../../utils/http.js'
import api from '../../../api.js'
import {obj2Param, parseTime} from '@/utils/index'
export default{
  components: {
    BottomNav,
    DistrictFilter
  },
  data () {
    return {
      show: false,
      show_empty: false,
      value1: 0,
      districtTitle: '宣讲地区',
      schoolTitle: '院校名称',
      timeTitle: '举办时间',
      campusNameData: [],
      holdingTime: [
        { text: '全部', value: '' },
        { text: '今天', value: '1' },
        { text: '明天', value: '2' },
        { text: '一周内', value: '3' },
        { text: '一个月内', value: '4' },
        { text: '三个月内', value: '5' },
        { text: '已举办', value: '6' },
        { text: '即将举办', value: '7' }
      ],
      params: {
        district1: '',
        district2: '',
        district3: '',
        school_id: '',
        keyword: '',
        timecase: ''
      },
      page: 1,
      pagesize: 10,
      dataset: [],
      finished: false,
      loading: false,
      finishedText: ''
    }
  },
  created () {
    this.initQuery(this.$route.query)
    this.$store.dispatch('getClassify', 'citycategory')
    this.fetchData(true)
    this.restoreFilter()
  },
  mounted () {
    // this.restoreFilter()
  },
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d}')
    }
  },
  watch: {
    $route (to, from) {
      // 对路由变化作出响应...
      if (from.name !== 'campusCareerTalkShow' && to.name === 'campusCareerTalk') {
        // 将地址栏中的url参数初始化到参数对象中
        this.initQuery(to.query)
        this.fetchData(true)
        // 恢复筛选条件
        this.restoreFilter()
      }
    }
  },
  methods: {
    toggleSearch () {
      this.show = !this.show
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = {...this.params}
      if (init === true) {
        this.page = 1
        this.pagesize = 10
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      http.get(api.preach_list, conditions).then((data) => {
        if (init === true) {
          this.dataset = data.data.items
        } else {
          this.dataset = this.dataset.concat(data.data.items)
        }
        this.loading = false
        if (data.data.items.length < this.pagesize) {
          this.finished = true
          if (init === false) {
            this.finishedText = '没有更多了'
          } else if (data.data.items.length === 0) {
            this.show_empty = true
          }
        }
      })
      http.get(api.get_school_name_list).then((res) => {
        this.restructureCampusName(res.data)
        this.restoreSchoolName()
      })
    },
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 地区筛选
    doSearchByDistrict (data) {
      this.doSearch({
        district1: data.district1,
        district2: data.district2,
        district3: data.district3
      })
      this.districtTitle = data.districtName
      this.$refs.dropDistrict.toggle()
    },
    // 学校名称筛选
    searchBySchool (value) {
      let currentSchool = this.campusNameData.filter((v) => {
        return v.value === value
      })[0]
      this.schoolTitle = currentSchool.text
      this.doSearch({
        school_id: currentSchool.value
      })
    },
    // 举办时间筛选
    searchByTime (value) {
      let currentTime = this.holdingTime.filter((v) => {
        return parseInt(v.value) === parseInt(value)
      })[0]
      if (currentTime === undefined) {
        this.timeTitle = '全部'
      } else {
        this.timeTitle = currentTime.text
      }
      this.doSearch({
        timecase: currentTime === undefined ? '' : currentTime.value
      })
    },
    // 恢复地区筛选
    restoreDistrict () {
      let queryData = this.$route.query
      if (queryData['district1']) {
        this.params.district1 = queryData['district1']
        this.params.district2 = queryData['district2']
        this.params.district3 = queryData['district3']
        let storeCity = this.$store.state.classifyCityOriginal
        let selectText = []
        let topItem = storeCity.filter((v) => {
          return parseInt(v.value) === parseInt(this.params.district1)
        })[0]
        selectText.push(topItem.label)
        if (topItem.children.length) {
          if (parseInt(this.params.district2)) {
            let secondItem = topItem.children.filter((v) => {
              return parseInt(v.value) === parseInt(this.params.district2)
            })[0]
            selectText.push(secondItem.label)
            if (secondItem.children.length) {
              if (parseInt(this.params.district3)) {
                let lowestItem = secondItem.children.filter((v) => {
                  return parseInt(v.value) === parseInt(this.params.district3)
                })[0]
                selectText.push(lowestItem.label)
              } else {
                selectText.push(`全${selectText[selectText.length - 1]}`)
              }
            }
          } else {
            selectText.push(`全${selectText[selectText.length - 1]}`)
          }
        }
        this.districtTitle = selectText[selectText.length - 1]
      } else {
        this.params.district1 = ''
        this.params.district2 = ''
        this.params.district3 = ''
        this.districtTitle = '地区'
      }
    },
    // 恢复院校名称筛选
    restoreSchoolName () {
      let queryData = this.$route.query
      if (queryData['school_id']) {
        this.params.school_id = queryData['school_id']
        let currentSchoolName = this.campusNameData.filter((v) => {
          return parseInt(v.value) === parseInt(queryData['school_id'])
        })[0]
        this.schoolTitle = currentSchoolName === undefined ? '院校名称' : currentSchoolName.text
      }
    },
    // 恢复举办时间筛选
    restoreTime () {
      let queryData = this.$route.query
      if (queryData['timecase']) {
        this.params.timecase = queryData['timecase']
        let currentTime = this.holdingTime.filter((v) => {
          return parseInt(v.value) === parseInt(queryData['timecase'])
        })[0]
        this.timeTitle = currentTime.text
      }
    },
    // 所有筛选恢复
    restoreFilter () {
      this.restoreDistrict()
      this.restoreTime()
    },
    // 通用搜索
    doSearch (data) {
      for (const key in data) {
        if (this.params.hasOwnProperty(key)) {
          this.params[key] = data[key]
        }
      }
      this.page = 1
      this.$router.push('/campus/preach' + obj2Param(this.params, '?'))
    },
    // 关键字搜索
    doSearchByKeyword (data) {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keyword = data.keyword
      this.page = 1
      this.$router.push('/campus/preach' + obj2Param(this.params, '?'))
    },
    // 重构学校名称数据
    restructureCampusName (data) {
      if (!this.campusNameData.length && this.campusNameData.length != data.length) {
        data.map((item) => {
          this.campusNameData.push({value: item.id, text: item.name})
        })
        if (this.campusNameData[0].text != '全部') {
          this.campusNameData.unshift({ value: '', text: '全部' })
        }
      }
    },
    // 地区筛选打开之后给筛选组件赋值
    openedDistrict () {
      this.$refs.dropDistrict.$children[0].$children[0].initData()
      setTimeout(() => {
        this.setComponentAttribute(this.$refs.dropDistrict)
      }, 300)
    },
    closedDistrict () {
      this.$refs.dropDistrict.$children[0].$children[0].handleCityOverlay()
    },
    // 设置地区筛选组件高度
    setComponentAttribute (component) {
      if (component.$children[0]) {
        let thisHeight = component.$children[0].$el.clientHeight
        component.$children[0].$children[0].layHeight = thisHeight
        let offTop = component.$el.offsetTop
        component.$children[0].$children[0].offTop = parseInt(parseInt(offTop) + parseInt(thisHeight) / 2)
      }
    },
    initQuery (query) {
      for (const key in this.params) {
        if (query.hasOwnProperty(key)) {
          this.params[key] = query[key]
        } else {
          this.params[key] = ''
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.height{
  height:53px;
}
.height2 {
  height: 25px;
}
.van-list{
  background: #f6f9fc;
}

.box_1 {
  .content {
    .search_ico {
      font-size: 12px;
      color: #c9c9c9;
      padding: 10px 0 10px 23px;
      background: url("../../../assets/images/search_ico_gray.svg") 0 center no-repeat;
      background-size: 15px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      line-height: normal;
    }
    position: relative;
    width: 340px;
    height: 37px;
    margin: 0 auto;
    background-color: #f8f8f8;
    text-align: center;
    border-radius: 36px;
  }
  width: 100%;
  background-color: #ffffff;
  padding: 11px 0;
}

.declare_meeting{
  min-height: 450px;
  background-color: #f4f7fc;
}
.declare_meeting .declare_list{
  margin: 0 10px;
  padding: 10px 0 0;
}
.declare_meeting .declare_list_pd1{
  padding: 10px 0;
}

.declare_meeting .declare_list_pd2{
  padding: 10px 0 0;
}

.declare_list .declare_item{
  height: 148.5px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.declare_list .declare_item .declare_t{
  height: 80px;
  padding: 16.5px 9px 16px;
  margin: 0 8px;
  border-bottom: 1px solid #eaeaea;
  position: relative;
}

.declare_list .declare_item .declare_t .de_icon{
  display: block;
  width:51px ;
  height:23px ;
  text-align: center;
  line-height: 23px;
  background-color:#bebebe;
  border-radius: 5px 0 0 5px;
  color: #fafcfd;
  font-size: 12px;
  position: absolute;
  right: -8px;
  top: 17px;
}

.declare_list .declare_item .declare_t .declare_name{
  color: #333333;
  font-size:16px ;
  display: block;
  margin-bottom: 7.5px;
  font-weight: bold;
  max-width: 265px;
}

.declare_list .declare_item .declare_t .declare_date{
  font-size: 14px;
}

.declare_list .declare_item .declare_b{
  display: flex;
  padding: 14px 16.5px 19.5px;
}
.declare_list .declare_item .declare_b .declare_b_img{
  width: 34.5px;
  height: 34.5px;
  margin-right:13px;
  border: 1px solid #e6edea;
  border-radius:10px;
  position: relative;
}
.declare_list .declare_item .declare_b .declare_b_img img{
  max-width: 25px;
  max-height: 25px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
}
.declare_list .declare_item .declare_b .declare_b_text{
  width: 265px;
}

.declare_list .declare_item .declare_b .declare_b_text1{
  display: block;
  color:#444444 ;
  font-size: 14px;
}

.declare_list .declare_item .declare_b .declare_b_text2{
  color:#999999 ;
  font-size: 13px;
}
</style>
